<template>
<view class="mine">
  <view class="user">
    <button class="login" @tap="getUserInfo">
      <image :src="showLogin?userInfo.avatarUrl:'/static/images/my/touxiang.png'"></image>
      <text>{{showLogin?userInfo.nickName:'点击登录'}}</text>
    </button>
  </view>
  <view @tap="collectClick">
    <view class="footprint total-back">
      <view class="left">
        <image src="/static/images/soucang.png" class="img"></image>
        <view class="foot-content">
          <view class="title">我的收藏</view>
          <view class="foot-desc">您的收藏记录在这里</view>
        </view>
      </view>
      <view class="right">
        <image src="/static/images/back.png" class="back"></image>
      </view>
    </view>
  </view>

  <view @tap="collectClick" data-type="zuji">
    <view class="footprint total-back">
      <view class="left">
        <image src="http://imgbdb3.bendibao.com/whbdb/202010/15/20201015192759_70782.png" class="img"></image>
        <view class="foot-content">
          <view class="title">我的足迹</view>
          <view class="foot-desc">您的浏览记录在这里</view>
        </view>
      </view>
      <view class="right">
        <image src="/static/images/back.png" class="back"></image>
      </view>
    </view>
  </view>
  
  <navigator url="../follow/follow">
    <view class="questions total-back">
      <view class="left">
        <image src="/static/images/my/dingyue.png" class="img"></image>
        <view class="title">下载本地宝APP</view>
      </view>
      <view class="right special">
        <text class="foot-desc" style="margin-right: 20rpx">获取最新本地政策、资讯</text>
        <image src="/static/images/back.png" class="back"></image>
      </view>
    </view>
  </navigator>
  <button open-type="share" hover-class="btn" class="recommend total-back">
    <view class="left">
      <image src="/static/images/my/tuijian.png" class="img"></image>
      <view class="title">推荐给朋友</view>
    </view>
    <view class="right">
      <image src="/static/images/back.png" class="back"></image>
    </view>
  </button>
  <!-- <button class="service total-back" open-type="contact">
    <view class="left">
      <image src="/images/my/kefu.png" class="img" />
      <view class="title">联系人工客服</view>
    </view>
    <view class="right">
      <image src="/images/back.png" class="back" />
    </view>
  </button> -->
  <button open-type="feedback" class="service total-back">
    <view class="left">
      <image src="/static/images/my/feedback.png" class="img"></image>
      <view class="title">我要反馈</view>
    </view>
    <view class="right">
      <image src="/static/images/back.png" class="back"></image>
    </view>
  </button>
  <view class="service total-back" @tap="delogin" v-if="showLogin">
    <view class="left">
      <image src="/static/images/my/delogin.png" class="img"></image>
      <view class="title">退出登录</view>
    </view>
    <view class="right">
      <image src="/static/images/back.png" class="back"></image>
    </view>
  </view>
</view>
</template>

<script>
//Page Object
const app = getApp();
const util = require("../../../utils/util.js");

export default {
  data() {
    return {
      tAppid: app.globalData.tAppid,
      textraData: app.globalData.textraData,
      // cityname: app.extConfig.cityname,
      showLogin: false,
      qrcodeimg: "",
      shareimg: "",
      city: "",
      citycode: "",
      wxurl: "",
      userInfo: "",
      user_id: ""
    };
  },

  components: {},
  props: {},
  //options(Object)
  onLoad: function (options) {
    // 获取城市公众号二维码、分享图
    util.getUrl(app.globalData.url).then(res => {
      util.cityConfig().then(res => {
        this.setData({
          qrcodeimg: res.qrcode ? res.qrcode : '',
          shareimg: res.shareimg ? res.shareimg : '',
          city: res.cityname ? res.cityname : uni.getStorageSync('city'),
          citycode: res.citycode ? res.citycode : uni.getStorageSync('citycode'),
          wxurl: "http://www.bendibao.com/app/m.html"
        });
      });
    });
  },

  onShow() {
    if (uni.getStorageSync("user_id")) {
      this.setData({
        showLogin: true
      });
    }

    if (uni.getStorageSync("userInfo")) {
      this.setData({
        userInfo: uni.getStorageSync("userInfo")
      });
    }
  },

  onShareAppMessage() {
    return {
      title: "本地宝",
      path: "pages/index/index",
      imageUrl: "http://imgbdb3.bendibao.com/xcxbdb/file/20212/9/20210209161843_68677.jpg"
    };
  },

  methods: {
    focusBtn() {
      if (this.wxurl != '') {
        uni.navigateTo({
          url: '/pages/webview/webview?path=' + encodeURIComponent(this.wxurl)
        });
      } else if (this.qrcodeimg != '' && this.wxurl == '') {
        uni.navigateTo({
          url: '/pages/mine/follow/follow'
        });
      } else {
        uni.showModal({
          title: '温馨提醒',
          content: '暂未开通本地订阅号，敬请期待哦~ 是否现在返回首页继续浏览本地资讯？',
          success: res => {
            if (res.confirm) {
              uni.switchTab({
                url: '/pages/index/index'
              });
            }
          }
        });
      }
    },

    // 获取用户授权并收藏
    getUserInfo(e) {
      if (!this.showLogin) {
        uni.getUserProfile({
          desc: "用于展示用户信息",
          success: res => {
            uni.setStorageSync("userInfo", res.userInfo);
            this.setData({
              userInfo: res.userInfo
            });
            let loginData = {
              action: "userInfo",
              session_key: uni.getStorageSync("session_key"),
              encryptedData: res.encryptedData,
              iv: res.iv,
              userInfo: JSON.stringify(res.userInfo),
              openid: uni.getStorageSync('openid') || '',
              unionid: uni.getStorageSync('unionid') || ''
            };
            util.request('user.php', loginData, 'POST').then(res => {
              if (res.data.state == 1) {
                uni.setStorageSync("user_id", res.data.data.user_id);
                this.setData({
                  showLogin: true,
                  user_id: uni.getStorageSync("user_id")
                });
              } else uni.showToast({
                title: '登录失败，请检查微信是否更新到最新版',
                icon: 'none'
              });
            });
          },
          fail: () => {
            uni.showToast({
              title: '请授权后再登录',
              icon: 'none'
            });
          }
        });
      }
    },

    collectClick(e) {
      let type = e.currentTarget.dataset.type;

      if (uni.getStorageSync("user_id")) {
        if (type) uni.navigateTo({
          url: '/pages/mine/zuji/zuji'
        });else uni.navigateTo({
          url: '/pages/mine/collect/index/index'
        });
      } else {
        uni.showToast({
          icon: "none",
          title: '请先登录哦~'
        });
      }
    },

    // 退出登录
    delogin() {
      uni.removeStorage({
        key: 'user_id',
        success: res => {
          this.setData({
            showLogin: false
          });
        }
      });
    }

  }
};
</script>
<style>
/* pages/Applets.wxss */

page {
    background: #f9f9f9;
}

.user {
    background-color: #fff;
}

.login {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50rpx 0;
}

.login image {
    width: 150rpx;
    height: 150rpx;
    border-radius: 50%;
}

.login text {
    font-size: 30rpx;
    font-family: PingFang SC, PingFang SC-Medium;
    font-weight: 500;
    text-align: left;
    color: #141414;
    margin-top: 18rpx;
    margin-bottom: 30rpx;
}

button {
    margin: 0;
    padding: 0;
    line-height: normal;
}

button::after {
    border: 0;
}

.footprint {
    border-top: 2rpx solid #f7f7f7;
}

.total-back {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 40rpx;
    background-color: #fff;
}

.left {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.img {
    height: 33rpx;
    width: 28rpx;
    margin-right: 30rpx;
}

.img:first-child {
    width: 46rpx;
    height: 49rpx;
}

.title {
    font-size: 30rpx;
    color: #232323;
}

.foot-desc {
    color: #a5a5a5;
    font-size: 24rpx;
}

.back {
    width: 14rpx;
    height: 25rpx;
}

.questions,
.service {
    margin-top: 14rpx;
    padding-top: 39rpx;
    padding-bottom: 35rpx;
}

.follow,
.recommend {
    border-top: 2rpx solid #f7f7f7;
}

.special {
    display: flex;
    align-items: center;
}
</style>